<style>
    .photo-remove {
        width: 10px;
        height: 10px;
        position: relative;
        top: -50px;
        color: white;
        background-color: red;
        border-radius: 50%;
        padding: 5px;
    }

    .photo-img {
        height: 100px;
        max-height: 100px;
    }

    .fa-remove:before, .fa-close:before, .fa-times:before {
        position: relative;
        top: -2px;
    }

    #photos {
        padding: 20px 0;
        display: flex;
        overflow-y: scroll;
        overflow-x: visible;
    }

    .photo {
        display: inline-table;
        overflow: unset;
    }

</style>

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <blockquote class="layui-elem-quote layui-text">
            在这里进行的设置会影响到首页相册的展示和轮播图的展示
        </blockquote>
        <div class="layui-form" action="">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>轮播图设置</legend>
            </fieldset>

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">开启轮播图</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest"-->
<!--                           lay-text="是|否">-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">轮播图自动滚动</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest"-->
<!--                           lay-text="是|否">-->
<!--                </div>-->
<!--            </div>-->


            <div class="layui-form-item">
                <label class="layui-form-label">添加轮播图</label>
                <button type="button" class="layui-btn" id="carousel-upload">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预览</label>
                <div id="photos">
<!--                    <div class="photo">-->
<!--                        &lt;!&ndash;                    轮播图片&ndash;&gt;-->
<!--                        <img src="images/test.png" id="photo1" class="photo-img">-->
<!--                        <i class="fa fa-times photo-remove" aria-hidden="true" onclick="remove(this)"></i>-->
                        <!--                    优先级选择，先去掉，不好搞-->
<!--                        <div style="width: 130px">-->
<!--                            <select name="rank" lay-filter="rank">-->
<!--                                <option value=""></option>-->
<!--                                <option value="0">0</option>-->
<!--                                <option value="1">1</option>-->
<!--                                <option value="2">2</option>-->
<!--                                <option value="3">3</option>-->
<!--                                <option value="4">4</option>-->
<!--                            </select>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </div>


            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>首页推荐相册设置</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">推荐相册ID</label>
                <div class="layui-input-block layui-inline" style="width: 15%;margin-left: unset">
                    <input type="text" name="username" autocomplete="off" placeholder="请输入相册ID"
                           class="layui-input HRID-input">
                </div>
                <div class="layui-input-block layui-inline" style="width: 15%;margin-left: unset">
                    <input type="text" name="username" autocomplete="off" placeholder="请输入相册ID"
                           class="layui-input HRID-input">
                </div>
                <div class="layui-input-block layui-inline" style="width: 15%;margin-left: unset">
                    <input type="text" name="username" autocomplete="off" placeholder="请输入相册ID"
                           class="layui-input HRID-input">
                </div>
                <div class="layui-input-block layui-inline" style="width: 15%;margin-left: unset">
                    <input type="text" name="username" autocomplete="off" placeholder="请输入相册ID"
                           class="layui-input HRID-input">
                </div>
<!--                <div class="layui-input-block layui-inline" style="width: 15%;margin-left: unset">-->
<!--                    <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入相册ID"-->
<!--                           class="layui-input HRID-input">-->
<!--                </div>-->
<!--                <div class="layui-input-block layui-inline" style="width: 15%;margin-left: unset">-->
<!--                    <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入相册ID"-->
<!--                           class="layui-input HRID-input">-->
<!--                </div>-->
<!--                <div class="layui-input-block layui-inline" style="width: 15%;margin-left: unset">-->
<!--                    <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入相册ID"-->
<!--                           class="layui-input HRID-input">-->
<!--                </div>-->
<!--                <div class="layui-input-block layui-inline" style="width: 15%;margin-left: unset">-->
<!--                    <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入相册ID"-->
<!--                           class="layui-input HRID-input">-->
<!--                </div>-->
            </div>
            <center>
                <button class="layui-btn" lay-submit="" lay-filter="save" style="margin: 0 auto">保存</button>
            </center>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'layedit', 'laydate','upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        var upload = layui.upload;

        //轮播图上传
        var uploadInst = upload.render({
            elem: '#carousel-upload' //绑定元素
            ,url: BasePath+'api/Carousel/Upload' //上传接口
            ,done: function(res){
                layer.msg('上传成功',function (){
                    location.reload();
                    jq1111('.layui-nav-item')[2].trigger("click");
                });
            }
            ,error: function(){
                layer.msg('上传失败，请联系管理员');
            }
        });

        //初始化轮播图内容
        var carouselData;
        jq1111.ajax({
            type: "GET",
            crossDomain:true,
            url: BasePath+"api/Carousel",
            contentType: "application/json",
            dataType:"json",
            async:false,
            xhrFields: {
                withCredentials: true
            },
            success:function (message) {
                console.log(message);
                carouselData=message.data;
                //图片设置
                carouselData.forEach(function (data) {
                    jq1111('#photos').append(
                        '<div class="photo">\n' +
                        '<img src="' +
                        BasePath+'api/CarouselImages/'+ data.fileName+
                        '" id="photo1" class="photo-img">\n' +
                        '<i class="fa fa-times photo-remove" aria-hidden="true" onclick="remove(' +
                        data.id +
                        ')"></i>\n' +
                        '</div>');

                });

            },
            error:function (message) {
                console.log(message.responseJSON);
                layer.msg('登录失败:'+message.responseJSON.msg);
            },
        });

        //初始化首页推荐相册
        var RHIDs;
        jq1111.ajax({
            type: "GET",
            crossDomain:true,
            url: BasePath+"api/HotRecommend/Get",
            contentType: "application/json",
            dataType:"json",
            async:false,
            xhrFields: {
                withCredentials: true
            },
            success:function (message) {
                console.log(message);
                RHIDs=message.data;
                //输入框value设置
                for (i=0;i<RHIDs.length;i++){
                    if(RHIDs[i]!=null){
                        jq1111('.HRID-input').eq(i).val(RHIDs[i].albumId);
                    }
                }
            },
            error:function (message) {
                console.log(message.responseJSON);
                layer.msg('登录失败:'+message.responseJSON.msg);
            },
        });




        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');


        //监听提交
        form.on('submit(save)', function (data) {
            var inputData=[];
            for (i=0;i<4;i++){
                inputData.push(jq1111('.HRID-input').eq(i).val())
            }
            console.log(inputData);
            //清空推荐
            RHIDs.forEach(function (data) {
                jq1111.ajax({
                    type: "POST",
                    crossDomain:true,
                    url:BasePath+"api/HotRecommend/"+data.id+"/Delete",
                    contentType: "application/json",
                    dataType:"json",
                    async:false,
                    xhrFields: {
                        withCredentials: true
                    },
                    success:function (message) {
                        console.log(message);
                    },
                    error:function (message) {
                        console.log(message.responseJSON);
                        // layer.msg('失败:'+message.responseJSON.msg);
                    },
                });
            });
            //添加
            inputData.forEach(function (albumId) {
                jq1111.ajax({
                    type: "POST",
                    crossDomain:true,
                    url:BasePath+"api/HotRecommend/"+albumId+"/Add",
                    contentType: "application/json",
                    dataType:"json",
                    async:false,
                    xhrFields: {
                        withCredentials: true
                    },
                    success:function (message) {
                        console.log(message);
                    },
                    error:function (message) {
                        console.log(message.responseJSON);
                        // layer.msg('失败:'+message.responseJSON.msg);
                    },
                });
            });

            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            return false;
        });
    });
</script>
<script type="text/javascript">

    //轮播图删除函数
    function remove(carouselId){
        jq1111.ajax({
            type: "POST",
            crossDomain:true,
            url: BasePath+"api/Carousel/"+carouselId+"/Remove",
            contentType: "application/json",
            dataType:"json",
            xhrFields: {
                withCredentials: true
            },
            success:function (message) {
                console.log(message);
            },
            error:function (message) {
                console.log(message.responseJSON);
                layer.msg('登录失败:'+message.responseJSON.msg);
            },
        });
    }
</script>
